<template>
  <div class="unmatch">
    <div class="search-nav-box">
      <div class="item-search">
        <span>充值时间段</span>
        <el-date-picker
          v-model="company.begintime"
          type="date"
          placeholder="请选择"
          value-format="yyyy-MM-dd"
          style="width:140px"
        ></el-date-picker>
        <span class="separator">~</span>
        <el-date-picker
          v-model="company.endtime"
          type="date"
          placeholder="请选择"
          value-format="yyyy-MM-dd"
          style="width:140px"
        ></el-date-picker>
      </div>
      <div class="item-search">
        <span>公司名称</span>
        <el-input
          v-model="company.name"
          placeholder="请输入公司名称"
          clearable
        ></el-input>
      </div>
      <div
        class="item-botton"
        @click="SearchInfo()"
      >查询</div>
    </div>
    <div class="table-box">
      <el-table
        :data="unMatchData"
        stripe
        border
        style="width: 100%"
        class="onplay-table"
        v-loading="loading"
      >
        <el-table-column
          label="企业名称"
          align="center"
        >
          <template slot-scope="scope">
            <div
              class="item-name item-name-companyname"
              @click="showCompanyInfo(scope.row)"
            >{{scope.row.companyname}}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="充值金额"
          align="center"
        >
          <template slot-scope="scope">
            <div class="item-cash">{{scope.row.totalfee}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="rechargdate"
          label="充值时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="accountname"
          label="银行账户"
          align="center"
        ></el-table-column>
        <el-table-column
          label="充值凭证"
          align="center"
          v-if="unMatchData && unMatchData.length>0"
        >
          <template slot-scope="scope">
            <div
              class="item-number"
              @click="LookInfo(scope.row)"
            >凭证</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="handlername"
          label="处理人"
          align="center"
        ></el-table-column>
      </el-table>

      <!-- <el-pagination @current-change="OnplayCurrentChange" :total="Onplay.total" :current-page="Onplay.pageNum" :page-size="Onplay.pageSize" layout="total, prev, pager, next, jumper" background>
      </el-pagination>-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="CurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[10,20, 30, 50,100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        background
      ></el-pagination>
    </div>
    <el-dialog
      title="充值凭证"
      :visible.sync="dialogVisible"
      width="30%"
      custom-class = "dialog_imgBox"
    >
      <img
        :src="'data:image/png;base64,'+imgbase64"
        alt
        width="100%"
        height="100%"
      >
    </el-dialog>
    <el-dialog
      :visible.sync="checkFlag"
      width="1040px"
      class="jhdialog"
    >
      <check
        v-show="checkFlag"
        :companyName="companyname"
        :companyId="companyid"
        :type="'0'"
        :tabNum="'4'"
      ></check>
    </el-dialog>
  </div>
</template>

<style scoped src='./unmatch.css'></style>
<script src="./unmatch.js"></script>
